<template>
  <div class="address-edit-view">
    <van-nav-bar left-arrow :title="route.query.id ? '编辑地址' : '新增地址'" @click-left="router.back()" />
    <van-address-edit :area-list="areaList" :show-delete="route.query.id ? true : false" show-set-default
      show-search-result :address-info="userStore.AddressEdit" :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave" :search-result="searchResult" @change-detail="onChangeDetail" @delete="onDelete" />
  </div>
</template>

<script setup lang="ts">
// 导入
import { areaList } from '@vant/area-data';
import AddressAddEditHook from '../hooks/address/AddressAddEditHook';
import { useUserStore } from '../store';
import { getAddressData, geoAddress } from '../api';
// 创建实例
const route = useRoute();
const router = useRouter();
const userStore = useUserStore()

// 点击保存地址
let { onSave } = AddressAddEditHook();
let searchResult = ref();
// 点击删除
const onDelete = async () => {
  await getAddressData({ status: "deleteAddress", userId: localStorage.getItem("token"), addressId: route.query.id });
  router.back();
};
const onChangeDetail = async (val: any) => {
  let result = await geoAddress(val);
  let res = result.pois.map((item: { name: any; address: any; }) => ({
    name: item.name,
    address: item.address
  }));
  if (val) {
    searchResult.value = res;
  } else {
    searchResult.value = [];
  }
};
</script>

<style scoped></style>
